<template>
	<view class="container">
		<!-- 选择待打印文件组件 -->
		<card>
			<template v-slot:header>
				<text>选择文件</text>
			</template>
			<upload-file class="box" @viewFile="viewFile" @uploadSuccess="uploadSuccess" :uploadUrl="uploadUrl"
				:headers="headers" :formData="formData">
				<view class=""> 选择要上传的文件 </view>
				<view class=""> 支持doc,docx,Excel,PDF </view>
			</upload-file>
		</card>

		<!-- 选择打印选项 -->
		<card>
			<template v-slot:header>
				<text>设置打印参数</text>
			</template>
			<view class="settingFileInfo box">
				<u-form labelPosition="top" :v-model="printerInfo">
					<u-form-item label="选择色彩" prop="colorInfo" borderBottom labelWidth="auto">
						<u-radio-group v-model="printerInfo.color" placement="row">
							<u-radio :customStyle="{ marginRight: '8px' }" v-for="(item, index) in selectColor"
								:key="item.name" :label="item.name" :name="item.value">
							</u-radio>
						</u-radio-group>
					</u-form-item>

					<u-form-item label="选择方向" prop="direction" borderBottom labelWidth="auto">
						<u-radio-group v-model="printerInfo.direction" placement="row">
							<u-radio :customStyle="{ marginRight: '8px' }" v-for="(item, index) in selectDirection"
								:key="item.name" :label="item.name" :name="item.value">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="选择纸张" prop="paper" borderBottom labelWidth="auto">
						<u-radio-group v-model="printerInfo.paper" placement="row">
							<u-radio :customStyle="{ marginRight: '8px' }" v-for="(item, index) in selectPaper"
								:key="item.name" :label="item.name" :name="item.value">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="选择页面" prop="page" borderBottom labelWidth="auto">
						<u-radio-group v-model="printerInfo.page" placement="row">
							<u-radio :customStyle="{ marginRight: '8px' }" v-for="(item, index) in selectPage"
								:key="item.name" :label="item.name" :name="item.value">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="选择打印店" prop="shop"  labelWidth="auto">
						<u-radio-group v-model="printerInfo.shop_id" placement="column">
							<u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in selectShop"
								:key="item.shopId" :label="item.shopName" :name="item.shopId">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="备注" prop="remark" labelWidth="auto">
						<u--textarea v-model="printerInfo.remark" placeholder="请输入备注!"></u--textarea>
					</u-form-item>
				</u-form>
				<v-button @clickHandle="printer" :disabled="!fileIsReady">打印</v-button>
			</view>
		</card>

		<!-- 支付选项 拉起微信支付 暂时注释不考虑 -->
		<!-- <pay class="box" /> -->

		<u-modal :show="show" :title="title" :closeOnClickOverlay="true" :content="content" :showCancelButton="true"
			@confirm="confirm" @cancel="cancel"></u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import uploadFile from "../../../components/UploadFile/index.vue";
	import pay from "../../../components/Pay/index";
	import Card from "@/components/Card";
	import Button from "@/components/Button";
	import option from "@/Config";
	import {
		mapGetters
	} from "vuex";
	import {
		getShopList,
		deleteFile,
		submitOrder
	} from "@/api/Printer";

	export default {
		name: "auto-printer",
		data() {
			return {
				/** 打印参数的表单选项 */
				printerInfo: {
					color: "black",
					direction: "row",
					paper: "A4",
					page: "single",
					shop_id: "",
					remark: "",
				},
				/** 选择的颜色 */
				selectColor: [{
						name: "黑白",
						value: "black",
						disable: false,
					},
					{
						name: "彩色",
						value: "colorful",
						disable: false,
					},
				],
				/** 选择的方向 */
				selectDirection: [{
						name: "横向",
						value: "row",
						disable: false,
					},
					{
						name: "纵向",
						value: "cloumn",
						disable: false,
					},
				],
				/** 选择的纸张 */
				selectPaper: [{
						name: "A4",
						value: "A4",
						disable: false,
					},
					{
						name: "A3",
						value: "A3",
						disable: false,
					},
				],
				/** 选择单页打印还是双页打印 */
				selectPage: [{
						name: "单页",
						value: "single",
						disable: false,
					},
					{
						name: "双面",
						value: "multiple",
						disable: false,
					},
				],
				/** 选择打印店 */
				selectShop: [],
				/** 是否支付完成 */
				isPay: false,
				/** 文件是否上传成功并且转码成功 */
				fileIsReady: false,
				/** 存储文件上传成功后的文件信息 用于提交订单 */
				fileUploadCompleted: [],
				/** 确认订单模态框 */
				show: false,
				title: "",
				content: "",
				uploadUrl: option.uploadFileUrl,
				shopId: "ba7755d1-f0c1-4cfa-8553-749671a6c151",
				headers: {},
				/** 设置参数 */
				program: undefined,
				formData: {},
			};
		},
		computed: {
			...mapGetters(["openId", "schoolId"]),
		},
		components: {
			"upload-file": uploadFile,
			pay: pay,
			card: Card,
			"v-button": Button,
		},
		methods: {
			viewFile(viewPath) {
				uni.navigateTo({
					url: `/pages/printer/fileView/index?url=${viewPath}`,
				});
			},
			uploadSuccess(item) {
				this.fileUploadCompleted.push(item);
				this.fileIsReady = true;
			},
			/**
			 * 文件上传后执行打印功能 提交打印参数 打印参数不用做校验 如果不设置会使用默认参数
			 */
			printer() {
				if (!this.fileIsReady) {
					this.$refs.uToast.show({
						type: "error",
						message: "请上传文件后在提交订单!",
					});
					return;
				}
				const files = this.fileUploadCompleted.map((item) => item.fileName);
				const content = `${files.join(
        ";"
      )} 文件已上传.请检查打印参数,若打印参数无误则可提交订单!`;
				this.settingModalInfo({
					show: true,
					title: "确认订单",
					content
				});
			},
			confirm() {
				this.content = "提交订单中!";
				this.submitOrder();
				this.cancel();
			},
			settingModalInfo({
				show = false,
				title = "",
				content = ""
			}) {
				this.show = show;
				this.title = title;
				this.content = content;
			},
			cancel() {
				this.show = false;
			},
			getShopList() {
				getShopList(this.schoolId)
					.then((result) => {
						this.selectShop = result.data;
						if (this.selectShop.length > 0) {
							this.printerInfo.shop_id = this.selectShop[0].shopId;
							this.shopId = this.selectShop[0].shopId;
							this.formData = {
								shopId: this.shopId,
								schoolId: this.schoolId,
								openId: this.openId,
							};
						}
					})
					.catch((err) => {
						this.selectShop = [];
					});
			},
			submitOrder() {
				uni.showLoading({
					title: "提交订单中",
				});
				const fileIds = this.fileUploadCompleted.map((item) => item.fileId);
				const data = {
					...this.printerInfo,
					open_id: this.openId,
					school_id:this.schoolId,
					num: 10,
					file_ids: fileIds.join(","),
					program: this.program,
				};
				submitOrder(data, this.openId)
					.then((result) => {
						uni.showToast({
							title: "订单提交成功!",
							icon: "success",
							duration: 2000,
						});
						uni.hideLoading();
						const {
							order_id
						} = result.data;
						uni.redirectTo({
							url: `/pages/OrderDetail/index?id=${order_id}`
						})
					})
					.catch((err) => {
						uni.showToast({
							title: "订单提交失败!",
							icon: "error",
							duration: 2000,
						});
					});
			},
		},
		onLoad(option) {
			const {
				program
			} = option;
			this.program = program;
			this.getShopList();
		},
	};
</script>

<style lang="scss">
	.container {
		padding: $uni-padding-20;
		height: 100%;

		.box {
			margin: 20rpx;
		}
	}
</style>
